<template>
  <h2>客户列表</h2>
  <el-table :data="custList" stripe style="width: 100%">
    <el-table-column prop="id" label="客户编号" width="180" />
    <el-table-column prop="custName" label="客户姓名" width="180" />
    <el-table-column prop="address" label="客户地址" />
    <el-table-column prop="phone" label="客户职业" />
    <el-table-column prop="grade" label="客户等级" />
    <el-table-column prop="hisTotal" label="消费总额" />
    <el-table-column fixed="right" label="Operations" min-width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="delCust(scope.row)">
         删除
        </el-button>
        <el-button link type="primary" size="small" @click="openCustVisible(scope.$index,scope.row)">修改</el-button>
      </template>
    </el-table-column>``
  </el-table>
  <hr/>

  <el-pagination
    size="small"
    background
    layout="prev, pager, next"
    :page-size="3"
    :pager-count="10"
    :total="total"
    class="mt-4"
    @current-change="handlerPageChange"
  />
  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="80%"
    
  >
  <h2>修改客户信息</h2>
  <el-form :model="custForm" label-width="120px" >
    <el-form-item label="客户名称">
      <el-input v-model="custForm.custName" style="width: 80%" />
    </el-form-item>
     <el-form-item label="联系地址">
      <el-input v-model="custForm.address"  style="width: 80%"/>
    </el-form-item>
    <el-form-item label="联系电话">
      <el-input v-model="custForm.phone" style="width: 80%"/>
    </el-form-item>

    <el-form-item label="客户职业">
      <el-select v-model="custForm.custType" placeholder="请选择你的职业" style="width: 80%">
        <el-option label="保密" value="保密" />
        <el-option label="金融" value="金融" />
        <el-option label="互联网" value="互联网" />
        <el-option label="IT" value="IT" />
        <el-option label="能源" value="能源" />
      </el-select>
    </el-form-item>
    <el-form-item label="客户登记">
      <el-input v-model="custForm.grade"  style="width: 80%"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="updateCustForm">保存</el-button>
      <el-button>取消</el-button>
    </el-form-item>

  </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted } from "vue";
import { ref } from 'vue';
import axios from 'axios';
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'; // 添加此行
const custList=ref([]);
const total=ref();
function custListQuery(pageNum){
  axios.get("http://localhost:8081/listCust?pageNum="+pageNum)
  .then((response)=>{custList.value=response.data.custList;
  total.value=response.data.total;})
  .catch((error)=>{console.log(error);})
}
onMounted(function(){
  custListQuery(1);
});


function handlerPageChange(value){
custListQuery(value);
}

const dialogVisible=ref(false);

function openCustVisible(index,row){
  dialogVisible.value=true;
  custForm.custName=row.custName;
  custForm.address=row.address;
  custForm.phone=row.phone;
  custForm.custType=row.custType;
  custForm.grade=row.grade;
  custForm.id=row.id;
}

const custForm=reactive({
  custName:'',
  address:'',
  phone:'',
  custType:'',
  grade:1,
  hisTotal:0,
  id:''
});

function updateCustForm(){
  axios.post("http://localhost:8081/updateCust",custForm)
  .then(
(response)=>{
  console.log(response.data);
  if(response.data.code==200){
    ElMessage(response.data.msg);
  }
  else{
    ElMessage(response.data.msg);
  }
})
.catch(
  (error)=>{
    console.log(error);
  }
);
}
function delCust(row){
  axios.delete("http://localhost:8081/delCust?id="+row.id)
  .then(
(response)=>{
  console.log(response.data);
  if(response.data.code==200){
    ElMessage(response.data.msg);
  }
  else{
    ElMessage(response.data.msg);
  }
})
.catch(
  (error)=>{
    console.log(error);
  }
);


}
</script>

<style scoped>

</style>